測試與除錯

測試和除錯是確保程式碼穩定與可維護的重要環節。今天我們將介紹如何使用Chrome DevTools進行除錯，並學習基本的單元測試工具Jest，來提升專案的品質與可靠性。

一、使用Chrome DevTools進行除錯

1. 使用 console.log()
   最簡單的除錯方式

let todoList = ["學習 JavaScript", "寫 Todo List"];
console.log(todoList);

2. 設置斷點
   在Chrome DevTools中，你可以在某一行程式碼設置斷點，程式會在執行到該行時暫停。這樣你可以一步步地觀察變數的變化，追蹤程式執行流程。
   打開 Chrome DevTools (快捷鍵 F12 或右鍵 -> 檢查)，進入 "Sources" 面板，選擇檔案並點擊行號來設置斷點。

3. 檢查DOM結構與樣式
   在"Elements"面板中，你可以檢查當前頁面的DOM結構，確認是否有元素未正確渲染，或者CSS樣式是否正確套用。

二、使用Jest進行單元測試
Jest 是一個非常流行的 JavaScript 測試框架，它可以幫助我們撰寫單元測試，確保每一個功能模組運行正常。讓我們從最基本的測試案例開始。

1. 安裝Jest
   如果你在本地使用npm或yarn，首先安裝Jest：

npm install --save-dev jest

2. 撰寫第一個測試案例
   在Todo List專案中，我們可以測試新增代辦事項的功能是否正確運行。例如，假設我們有一個函數 addTodo()，可以撰寫對應的測試：

// todo.js
function addTodo(todoList, newTodo) {
    todoList.push(newTodo);
    return todoList;
}
module.exports = addTodo;

然後撰寫測試程式：

// todo.test.js
const addTodo = require('./todo');

test('should add new todo to the list', () => {
    let todos = ['學習 JavaScript'];
    let newTodo = '寫測試案例';
    let updatedTodos = addTodo(todos, newTodo);
    expect(updatedTodos).toContain('寫測試案例');
});

3. 執行測試
   使用命令運行測試：

npx jest

4. 測試結果
   如果測試通過，會顯示成功的訊息；如果測試失敗，會顯示錯誤的原因，幫助你定位問題。

三、測試的重要性
測試不僅僅是為了找到錯誤，還有助於確保專案在未來的維護中不會因為修改某一部分功能而導致其他部分出現問題。透過單元測試，我們可以在專案的每一個關鍵功能點上設置“保護網”，當發生問題時可以及時發現。